<template>
  <div>
    <MainSection title="Home" :loading="loading">
    <!--      head内置组件处理seo-->
      <Head>
        <Title>Home / Twitter</Title>
      </Head>
      <div class="border-b" :class="twitterBorderColor">
        <TweetForm :user="user"  @on-success="handleFormSuccess"></TweetForm>
      </div>

    <!--列表部分-->
      <TweetListFeed :tweets="homeTweets" />
    </MainSection>
  </div>
</template>
<script setup>
import MainSection from "~/components/MainSection.vue";
import useTweets from "~/composables/useTweets.js";
const {twitterBorderColor} = useTailwindConfig()
const {useAuthUser} = useAuth()
const user = useAuthUser()
const {getTweets} = useTweets()

const loading = ref(false)
const homeTweets = ref([])

onBeforeMount(async ()=>{
  loading.value = true
  try {
    const {tweets} = await getTweets()
    homeTweets.value = tweets
  }catch (e) {
    console.log(e)
  }finally {
    loading.value = false

  }
})
const handleFormSuccess =(tweet)=>{
  navigateTo({
    path: `/status/${tweet.id}`
  })
}
</script>